<template>
  <view class="wrap">
    <view class="content">
      <view class="title">欢迎登录</view>
      <input class="u-border-bottom" type="text" v-model="username" placeholder="输入手机号" />
      <input v-if="showPassWord" class="u-border-bottom u-p-t-30" type="password" v-model="password" placeholder="密码" />
      <button @tap="submit" :style="[inputStyle]" class="getCaptcha">{{ showPassWord ? '立即登录' : '获取数字验证码' }}</button>
      <view class="alternative">
        <view class="password" @tap="showPassWord = !showPassWord">{{ showPassWord ? '验证码登录' : '密码登录' }}</view>
        <view class="issue" v-if="showPassWord" @tap="$u.route('/pages/resetPassword/resetPassword')"><text>忘记密码</text></view>
      </view>
    </view>
    <view class="loginType">
      <!-- 微信登录，支持小程序和APP，H5端体验不好，暂时不做 -->
      <!-- #ifdef MP-WEIXIN -->
      <button open-type="getUserInfo" @getuserinfo="wechatLogin" class="item">
        <u-icon size="80" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
        <text class="wechat">微信</text>
      </button>
      <!--  #endif -->
      <!-- #ifdef APP-PLUS -->
      <button class="item" @tap="appLogin">
        <u-icon size="80" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
        <text class="wechat">微信</text>
      </button>
      <!-- #endif -->
    </view>
    <!-- #ifndef H5 -->
    <view class="hint">登录代表同意并授权使用您的微信账号信息（如昵称、头像）以便您统一管理，新用户自动进行注册</view>
    <!-- #endif -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      showPassWord: false
    };
  },
  computed: {
    inputStyle() {
      let style = {};
      if (this.username === '') {
        return;
      }
      if (this.password === '' && this.showPassWord) {
        return;
      }
      style.color = '#fff';
      style.backgroundColor = this.$u.color['warning'];
      return style;
    }
  },
  methods: {
    checkLogin(res) {
      if (res.code == 1) {
        this.$store.commit('login', res.data);
		
        this.$refs.uToast.show({
          title: res.msg,
          type: 'success',
          callback: () => {
            this.$u.route({
              type: 'back'
            });
          }
        });
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: 'error'
        });
      }
    },
    submit() {
      if (this.$u.test.mobile(this.username) || this.$u.test.email(this.username)) {
        // 密码登录
        if (this.showPassWord) {
          this.$loading();
          this.$api.post({
            url: 'user/public/login',
            data: {
              username: this.username,
              password: this.password,
              device_type: this.$deviceType
            },
            success: res => {
              this.checkLogin(res);
            },
            complete: () => {
              uni.hideLoading();
            }
          });
        } else {
          // 验证码登录
          this.$api.getVerifiCode(
            this.username,
            this.$u.route('/pages/login/code', {
              type: 'redirectTo',
              username: this.username
            })
          );
        }
      } else {
        this.$refs.uToast.show({
          title: '请输入手机号或邮箱',
          type: 'warning'
        });
      }
    },
    //微信小程序登录
    wechatLogin() {
      this.$loading();
      uni.login({
        success: loginRes => {
          if (loginRes.code) {
            uni.getUserInfo({
              withCredentials: true,
              success: info => {
                this.$api.post({
                  url: 'user/public/wechatLogin',
                  data: {
                    code: loginRes.code,
                    encrypted_data: info.encryptedData,
                    iv: info.iv,
                    raw_data: info.rawData,
                    signature: info.signature
                  },
                  success: res => {
                    this.checkLogin(res);
                  },
                  complete: () => {
                    uni.hideLoading();
                  }
                });
              },
              fail: res => {
                if (res.errMsg == 'getUserInfo:cancel' || res.errMsg == 'getUserInfo:fail auth deny') {
                  this.$refs.uToast.show({
                    title: '请删除此小程序重新授权',
                    type: 'error'
                  });
                }
              }
            });
          }
        }
      });
    },
    // APP登录
    appLogin() {
      let that = this;
      this.$loading();
      uni.login({
        provider: 'weixin',
        success: function(loginRes) {
          uni.getUserInfo({
            provider: 'weixin',
            success: infoRes => {
              that.$loading();
              that.$api.post({
                url: 'user/public/appLogin',
                data: infoRes.userInfo,
                success: res => {
                  that.checkLogin(res);
                },
                complete: () => {
                  uni.hideLoading();
                }
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;
  .content {
    width: 600rpx;
    margin: 0 auto;
    padding-top: 120rpx;
    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 80rpx;
    }
    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
    }
    .getCaptcha {
      background-color: rgb(253, 243, 208);
      color: $u-tips-color;
      font-size: 30rpx;
      padding: 12rpx 0;
    }
    .alternative {
      color: $u-tips-color;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }
  .loginType {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 130rpx;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $u-content-color;
      font-size: 28rpx;
      &::after {
        border: none;
      }
    }
  }
}
.hint {
  padding: 20rpx 40rpx;
  font-size: 20rpx;
  color: $u-tips-color;
}
</style>
